<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>业务页面</title>
    <link rel="stylesheet" href="../../../css/style.css">
</head>
<body>
<div class="container">
    <div class="row"><ol class="bread-crumb">
        <li>主页</li>
        <li>业务管理</li>
        <li>员工档案</li>
    </ol></div>
    <div class="row">
        <div>
            <label>员工姓名</label><input/>
            <label>员工部门</label><select id="deptForQuery"></select>

        </div>
    </div>
    <div class="row">
      <div id="tableBox">
          <table id="list"></table>
      </div>

    </div>
</div>

<div id="toolbar">
    <button id="btnAdd">添加</button>
    <button id="btnUpdate">修改</button>
    <button id="btnRemove">删除</button>
</div>

<div class="modal">
    <div>
        <div>
            <input type="hidden" id="empId"/>
            <label>员工姓名:</label><input id="empName"/>
        </div>
        <div>
            <label>员工部门:</label><select id="deptForUpdate"></select>
        </div>
        <div>
            <button id="btnModify">修改</button>
        </div>
    </div>

</div>
<!--
  修改的步骤
  1. 选中行，改变行状态
  2. 点击修改按钮，取值选中行的index，然后取出对应数组中的对象
  3. 把取到的对象的相关内容赋值给模态窗体
         初始化下拉列表
         下拉列表的选中设置
  4. 当点击修改界面的修改按钮时，按id查找对象，把修改的值反应对象上
      然后替换数组中的内容——最后重新使用数组初始化table
-->

</body>
<script src="../0.vendor/jquery-3.6.0.js"></script>
<script src="../../../mock/employees.js"></script>
<script src="js/crud.js"></script>

</html>